<template>
  <h2 style="background-color:#cccccc;text-align: center">购物车</h2>
  <div class="cart-page">
    <div class="group">
      <div class="cart-item" v-for="(item, index) in cartList" :key="item.id">
        <el-checkbox
            v-model="item.checked"
            class="checkbox"
        />
        <div class="item-image">
          <img :src="item.image" alt="product" />
        </div>
        <div class="item-info">
          <div class="item-name">{{ item.name }}</div>
          <div class="item-price">¥{{ item.price.toFixed(2) }}</div>
          <div class="quantity-control">
            <el-button
                type="text"
                @click="decreaseQuantity(index)"
            >
              -
            </el-button>
            <span class="quantity">{{ item.quantity }}</span>
            <el-button
                type="text"
                @click="increaseQuantity(index)"
            >
              +
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-bar">
      <el-button
          type="primary"
          plain
          @click="handleDelete"
      >
        删除
      </el-button>
      <div class="total-price">合计: ¥{{ totalPrice.toFixed(2) }}</div>
      <el-button
          type="danger"
          @click="handleCheckout"
      >
        结算({{ selectedCount }})
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {shopListStore} from "@/store/shopListStore.ts";
let cartList = ref(shopListStore().cartList)
const decreaseQuantity = (index: number) => {
  if (cartList.value[index].quantity > 0) {
    cartList.value[index].quantity--
  }
}

const increaseQuantity = (index: number) => {
  cartList.value[index].quantity++
}

const totalPrice = computed(() => {
  return cartList.value.reduce((sum, item) => {
    return item.checked ? sum + item.price * item.quantity : sum
  }, 0)
})

const selectedCount = computed(() => {
  return cartList.value.filter(item => item.checked).length
})

const handleDelete = () => {
  cartList.value = cartList.value.filter(item => !item.checked)
  ElMessage.success('选中商品已删除')
}
const handleCheckout = () => {
  const selectedItems = cartList.value.filter(item => item.checked)
  if (selectedItems.length === 0) {
    ElMessage.warning('请选择要结算的商品')
    return
  }
  ElMessage.success('购买成功')
}
</script>

<style scoped>
.group{
  height: 620px;
  overflow-y: auto;
}
.cart-page {
  padding: 10px;
  background-color: #fff;
}

/* 单个商品项样式 */
.cart-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.checkbox {
  margin-right: 10px;
}
.item-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}
.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.item-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.item-price {
  font-size: 14px;
  color: #f00;
  margin-bottom: 8px;
}

.quantity-control {
  display: flex;
  align-items: center;
}
.quantity-control .el-button {
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.quantity {
  margin: 0 10px;
}

.bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-top: 10px;
  border-top: 1px solid #eee;
}
.total-price {
  font-size: 16px;
  color: #f00;
  font-weight: bold;
}
</style>